import styled from 'styled-components';
import pageBg from '../assets/pageBg.png';

export const IndexPageStyle = styled.div`
  position: relative;
  width: 100vw;
  min-height: 100vh; /* 允许内容超出视口高度 */
  overflow-x: hidden; /* 只隐藏横向滚动 */
  overflow-y: auto; /* 允许垂直滚动 */
  margin: 0;
  padding: 0;
  background: url(${pageBg}) center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Microsoft YaHei', sans-serif;
  
  /* 深蓝色科技背景叠加 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
      rgba(13, 25, 43, 0.95) 0%, 
      rgba(27, 39, 53, 0.90) 50%, 
      rgba(13, 25, 43, 0.95) 100%);
    z-index: 1;
  }
  
  /* 科技感网格背景 */
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      linear-gradient(rgba(0, 153, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 153, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 2;
  }
  
  /* 全局字体设置 */
  * {
    color: #ffffff;
    font-family: 'Microsoft YaHei', sans-serif;
  }
`;

export const IndexPageContent = styled.div`
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 150vh; /* 增加到150vh，确保有足够的滚动空间 */
  display: flex;
  flex-direction: column;
  padding: 0.08rem; /* 进一步减少边距 */
  gap: 0.08rem; /* 进一步减少组件间距 */

  /* 顶部标题区域 */
  .header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    margin-bottom: 0.03rem; /* 进一步减少底部边距 */
  }

  /* 主标题样式 */
  .main-title {
    font-size: 0.5rem; /* 恢复较大的标题 */
    font-weight: bold;
    color: #00d4ff;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
    text-align: center;
    margin: 0;
    
    .title-decoration {
      color: #89e5ff;
      margin-left: 0.2rem;
    }
  }

  /* 时间显示 */
  .time-display {
    position: absolute;
    top: 0.08rem;
    right: 0.12rem;
    color: #89e5ff;
    font-size: 0.16rem; /* 增加时间字体 */
    letter-spacing: 0.02rem;
    text-shadow: 0 0 8px rgba(137, 229, 255, 0.6);
  }

  /* KPI指标区域 */
  .kpi-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.12rem; /* 稍微减少KPI间距 */
    flex-wrap: wrap;
    margin-bottom: 0.03rem;
  }

  /* 内容区域 - 左中右三列布局 */
  .content-section {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.08rem; /* 保持较小的列间距 */
    min-height: calc(120vh - 2rem); /* 大幅增加内容区域高度 */
  }

  /* 左侧列 */
  .left-column {
    display: flex;
    flex-direction: column;
    gap: 0.08rem; /* 减少组件间距 */
  }

  /* 中间列 */
  .center-column {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
  }

  /* 右侧列 */
  .right-column {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
  }

  /* 通用图表容器样式 */
  .chart-container {
    background: linear-gradient(135deg, 
      rgba(0, 102, 255, 0.08) 0%, 
      rgba(0, 204, 255, 0.05) 100%);
    border: 1px solid rgba(0, 153, 255, 0.3);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    position: relative;
    min-height: 5rem; /* 大幅增加最小高度 */
    
    /* 容器内部边框发光效果 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 8px;
      padding: 1px;
      background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.4) 0%, 
        rgba(0, 153, 255, 0.2) 50%, 
        rgba(0, 255, 255, 0.4) 100%);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      z-index: -1;
    }

    /* 悬停效果 */
    &:hover {
      border-color: rgba(0, 255, 255, 0.6);
      box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
      transform: translateY(-2px);
      transition: all 0.3s ease;
    }
  }

  /* 图表区域高度设置 - 大幅增加所有图表的高度 */
  .left-top-chart, .left-bottom-chart {
    min-height: 7rem; /* 大幅增加高度 */
  }

  .center-top-chart {
    min-height: 5rem; /* 增加高度 */
  }

  .center-bottom-chart {
    min-height: 8rem; /* 大幅增加用户行为统计高度 */
  }

  .right-top-chart {
    min-height: 6rem; /* 增加右侧顶部高度 */
  }

  .right-bottom-chart {
    min-height: 10rem; /* 大幅增加表格区域高度 */
  }

  /* 响应式调整 */
  @media (max-height: 800px) {
    .content-section {
      min-height: calc(100vh - 1.5rem);
    }
    
    .left-top-chart, .left-bottom-chart {
      min-height: 6rem;
    }
    
    .center-top-chart, .right-top-chart {
      min-height: 5rem;
    }
    
    .center-bottom-chart {
      min-height: 7rem;
    }
    
    .right-bottom-chart {
      min-height: 8rem;
    }
  }

  /* 大屏模式优化 */
  @media (min-height: 1200px) {
    .left-top-chart, .left-bottom-chart {
      min-height: 9rem;
    }
    
    .center-top-chart {
      min-height: 6rem;
    }
    
    .center-bottom-chart {
      min-height: 10rem;
    }
    
    .right-top-chart {
      min-height: 8rem;
    }
    
    .right-bottom-chart {
      min-height: 12rem;
    }
  }
`;
